<ui:composition		
	  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"      
      xmlns:pe="http://primefaces.org/ui/extensions">

	
	     
<h:form id="frmDynamicForm" >
	 <h:panelGroup id="dynaFormGroup" rendered="#{dynamicFormBean.formVisible}">
	 	<p:fieldset legend="Edicion de datos" toggleable="false" style="marging-bottom:20px">      
			<pe:dynaForm id="dynaForm" value="#{dynamicFormBean.model}" var="data"  >  
		    	<pe:dynaFormControl type="input" for="txt">  
		           <p:inputText id="txt" value="#{data.value}" required="#{data.required}" />  
		       	</pe:dynaFormControl>  
		       	<pe:dynaFormControl type="calendar" for="cal" styleClass="calendar">  
		           <p:calendar id="cal" value="#{data.value}" required="#{data.required}" showOn="button"/>  
		       	</pe:dynaFormControl>  
		       	<pe:dynaFormControl type="select" for="sel" styleClass="select">  
		           <p:selectOneMenu id="sel" value="#{data.value}" required="#{data.required}">  
		               <f:selectItems value="#{data.selectItems}"/>  
		           </p:selectOneMenu>  
		       	</pe:dynaFormControl>  
		        <pe:dynaFormControl type="inputHidden" for="txth">  
		           <h:inputHidden id="txth" value="#{data.value}" required="#{data.required}" />  
		        </pe:dynaFormControl>
		        
		        <pe:dynaFormControl type="inputPhone" for="txtphone">  
		           <p:inputMask id="txtphone" value="#{data.value}" required="#{data.required}" mask="(999) 999-999999"/>		             
		        </pe:dynaFormControl>
		        <pe:dynaFormControl type="inputPassword" for="txtpassword">
		        	<p:password id="txtpassword" value="#{data.value}" required="#{data.required}" feedback="true" redisplay="true" />
		        </pe:dynaFormControl> 
		         <f:facet name="buttonBar">  
		             <p:commandButton value="Submit" actionListener="#{dynamicFormBean.submitForm}"  update=":frmDynamicForm :frmCatalogue" /> 
		             <p:commandButton value="Cancel"  update=":frmDynamicForm" process="@this" style="margin-left:5px;">
		             	<p:resetInput target=":frmDynamicForm"/>
		             </p:commandButton>
		         </f:facet>  
			</pe:dynaForm>  
    	</p:fieldset>
    </h:panelGroup>
</h:form>	
  	
           
	<!-- <p:dialog header="Input values" widgetVar="inputValuesWidget">
    	<h:panelGroup id="inputValues" layout="block" style="margin:10px;">
        	<h:outputText value="valores de prueba" escape="false"/>
    	</h:panelGroup>
	</p:dialog>
     -->  
        <h:outputScript id="dynaFormScript" target="body">  
            /* <![CDATA[ */ 
            function handleComplete(xhr, status, args) { 
            if(args && args.isValid) { 
            PF('inputValuesWidget').show(); 
            } else { 
            PF('inputValuesWidget').hide(); 
            } 
            } 
            /* ]]> */  
        </h:outputScript>  

        <h:outputStylesheet id="dynaFormCSS">  
            /* note: trick with colspan is needed for IE8 */  
            .pe-dynaform-cell input,  
            .pe-dynaform-cell textarea,  
            .pe-dynaform-cell[colspan="1"] input,  
            .pe-dynaform-cell[colspan="1"] textarea {  
            width: 150px;  
            }  

            /* note: trick with colspan is needed for IE8 */  
            .pe-dynaform-cell.calendar input,  
            .pe-dynaform-cell[colspan="1"].calendar input {  
            width: 120px;  
            }  

            .pe-dynaform-cell.select .ui-selectonemenu {  
            width: 157px !important;  
            }  

            .pe-dynaform-cell.select .ui-selectonemenu .ui-selectonemenu-label {  
            width: 130px !important;  
            }  
        </h:outputStylesheet>
</ui:composition>